<ion-header class="ion-header">
    <header-component>
        <ion-toolbar>
            <ion-buttons class="button-left">
                <img navBackButton src="assets/imgs/return.svg" *ngIf='canGoBack' alt="">
                <img src="assets/imgs/scan.svg" *ngIf='!canGoBack' (click)="scan()">
            </ion-buttons>
            <ion-title (click)="Search('2')">{{ projectName }}</ion-title>
            <ion-buttons class="button-right" (click)="Search('0')">
                <img src="assets/imgs/search.svg" alt="">
            </ion-buttons>
        </ion-toolbar>
    </header-component>
</ion-header>

<ion-content>
    <div class="bg-top" [ngStyle]="person.headStylebg"></div>
    <div class="top">
        <!-- 标题 -->
        <!-- <div class="project-title">
                <div class="title-left">
                    <img src="assets/imgs/scan.svg" *ngIf='!canGoBack'>
                    <ion-icon *ngIf='canGoBack' (click)='goBack()' name="ios-backwhite"></ion-icon>
                </div>
                <div class="title-name" (click)="Search('2')">{{ projectName }}</div>
                <div class="title-right" (click)="Search('0')">
                    <img src="assets/imgs/search.svg" alt="">
                </div>
            </div> -->

        <!-- 头像 -->
        <div class="circle text-center">
            <div class="head-portrait" [ngStyle]="person.headStyle"></div>
        </div>

        <div style="position:relative;">
            <span class="bg-shadow" [ngStyle]="person.headStylebg"></span>
            <span class="bg-shadow" [ngStyle]="person.headStylebg"></span>
            <!-- 参数项 -->
            <div class="midDiv">
                <div class="mid-content" *ngFor="let data of indexDataList" [ngStyle]="{display: data.isShow? 'block': 'none'}">
                    <!-- <img src="assets/imgs/gallery/SVG/17148.svg"> -->
                    <div class="mid-title">
                        <span *ngIf="data.Data1 !== null" class="inline-data" [class.alarm-data]="(data.IndexName === '传感器' && ( data.Data2 !=null ) && ( data.Data1 > 0 ))  || (data.IndexName === '数据栈' && (data.Data2 != null) && (data.Data1 > 0))">
                            {{ data.Data1 | numberAbs:data.Flag }}
                            <i>{{ data.Unit1 }}</i>
                        </span>
                        <span class="total-data" *ngIf='data.Data2'>{{ data.Data2 }}
                            <i>{{ data.Unit }}</i>
                        </span>
                    </div>
                    <div class="mid-name">
                        {{ data.IndexName }}
                    </div>
                </div>
            </div>
        </div>

        <!-- 通知 -->
        <div class='inform' *ngIf='blocInfo && blocInfo.Announcement && blocInfo.Announcement.length'>
            <img src="assets/imgs/gallery/SVG/17124.svg">
            <marquee direction="left">{{ blocInfo.Announcement }}</marquee>
        </div>
    </div>

    <div class="bottom-part">
        <div class="tasks">
            <div *ngFor="let task of flowList" class="task-list" (click)="goOrderList(task)">
                <span class="order-content">
                    {{ task.Title }}
                    <span style="color: #1fb5ff;" *ngIf="task.IsOwner">[ 业主 ]</span>
                </span>
                <div class="time">{{ task.CreateTime }}</div>
            </div>
        </div>

        <div class="area">
            <!-- <sub-title [subTitleName]="p.menuName" *ngIf='p.children.length>0'></sub-title> -->
            <div class="area-content">
                <div class="each-module" *ngFor="let f of PList" (click)="goPage(f)">
                    <!-- <img src="assets/imgs/gallery/SVG/{{f.icon}}" imgState="assets/imgs/gallery/SVG/17028.svg" *ngIf="f.menuName !== undefined" /> -->
                    <img [imgStateUrl]='"assets/imgs/gallery/SVG/"+f.icon+".svg"' imgDefault="assets/imgs/gallery/SVG/17028.svg" *ngIf="f.menuName !== undefined">
                    <!-- <img [imgLazyLoad]='"assets/imgs/gallery/SVG/"+f.icon' imageBeforeLoad='assets/imgs/gallery/SVG/17028.svg'
                            selector='index-project' *ngIf="f.menuName !== undefined" /> -->
                    <p>{{ f.menuName }}</p>
                </div>
            </div>
        </div>

        <hr style="height:8px;width:100%;background-color: #F5F5F5 !important;margin:0;" *ngIf='PList.length>0'>

        <div class="area area-info">
            <h3 class="area-title">设施监控</h3>
            <div class="area-content">
                <div class="each-module" *ngFor="let f of systemList" (click)="goDeiveSystem(f)">
                    <img [imgStateUrl]='"assets/imgs/system/function/"+f.deviceSysId + ".svg"' imgDefault="assets/imgs/gallery/SVG/17028.svg" *ngIf="f.deviceSysName !== undefined">
                    <p>{{ f.deviceSysName }}</p>
                </div>
            </div>
        </div>

    </div>
</ion-content>